<script>
import api from '@/api'

export default {
  name: 'goods',
  data() {
    return {
      goodsList: [],
      page: 1,
      isLoading: false
    }
  },
  onLoad() {
    this.getGoodsList()
  },
  computed: {
    isSelectAll() {
      if (this.goodsList.length === 0) return false
      return this.goodsList.every((item) => item.isSelect)
    },
    selectedCount() {
      return this.goodsList.reduce((previousValue, currentValue) => {
        return previousValue + (currentValue.isSelect ? 1 : 0)
      }, 0)
    },
    totalPrice() {
      return this.goodsList.reduce((prev, current) => {
        if (current.isSelect) {
          prev += Number(current.price)
        }
        return Number(prev)
      }, 0)
    }
  },
  methods: {
    async getGoodsList() {
      this.isLoading = true
      try {
        const result = await api.welfareHouses.goods(this.page)
        if (result.code === 200) {
          // 当前页大于最后一页，表示数据已经加载完成了
          if (this.page > result.data.last_page) {
            throw new Error('没有更多数据了')
          }
          result.data.data.forEach((item) => {
            // 赋值默认的选中状态
            item.isSelect = this.$store.state.goods.goodsList.findIndex(v => v.id === item.id) !== -1
          })
          if (this.page === 1) {
            // 加载第一页的数据
            this.goodsList = result.data.data
          } else {
            // 加载下一页
            this.goodsList.push(...result.data.data)
          }
        } else {
          throw new Error('获取商品列表失败')
        }
      } catch (e) {
        await uni.showToast({icon: 'none', title: e.message})
      } finally {
        this.isLoading = false
      }
    },
    onLoadMore() {
      if (this.isLoading) return
      this.page ++
      this.getGoodsList()
    },
    confirmAdd() {
      const selectedGoods = this.goodsList.filter((item) => item.isSelect)
      this.$store.commit('goods/addGoods', selectedGoods)
      uni.navigateBack()
    },
    handleUpdateSelect({ id, isSelect }) {
      this.goodsList.some((item) => {
        if (item.id === id) {
          item.isSelect = isSelect
          return true
        }
      })
    },
    updateSelectAll() {
      const isSelectAll = this.isSelectAll
      this.goodsList.forEach((item) => (item.isSelect = !isSelectAll))
    },
  },
}
</script>

<template>
  <view class="goods-layout">
    <my-header title="商品列表"></my-header>
    <my-content class="content">
      <scroll-view class="goods-list" scroll-y="true" @scrolltolower="onLoadMore">
        <my-goods
          @updateSelect="handleUpdateSelect"
          v-for="goods in goodsList"
          :key="goods.id"
          :goods="goods"
          selectable
        ></my-goods>
      </scroll-view>
      <view class="bottom">
        <view class="left">
          <view class="select" @click="updateSelectAll">
            <image
              class="selectAll"
              :src="'https://www.dingxians.cn/upload/images/common/' + (isSelectAll ? 'selected' : 'unselected') + '.png'"
            ></image>
            <text style="margin-left: 10rpx">全选</text>
          </view>
          <view style="margin-left: 55rpx; font-size: 24rpx">
            <view>已选 <text style="color: #EE5093">{{selectedCount}}</text>件</view>
            <view>可拒提：<text style="color: #EE5093">{{totalPrice.toFixed(2)}}</text>
              <image class="gold-icon" src="https://www.dingxians.cn/upload/images/shop/money.png"></image>
            </view>
          </view>
        </view>
        <text class="btn-add btn-primary" @click="confirmAdd">确认添加</text>
      </view>
    </my-content>
  </view>
</template>

<style scoped lang="scss">
.goods-layout {
  /*height: 100vh;*/
  min-height: 100vh;
  background-color: #141414;

  .content {
    /*height: 100vh;
    overflow-y: hidden;*/
    height: 100vh;
    display: flex;
    flex-direction: column;

    .goods-list {
      flex: 1;
      overflow-y: hidden;
      width: 710rpx;
      margin: 0 auto;
    }

    .bottom {
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 120rpx;
      width: 100%;
      box-sizing: border-box;
      padding: 0 30rpx;

      .left {
        display: flex;
        align-items: center;

        .gold-icon {
          width: 32rpx;
          height: 32rpx;
          margin-left: 5rpx;
          vertical-align: middle;
        }
      }

      .btn-add {
        width: 258rpx;
        height: 84rpx;
        line-height: 84rpx;
        text-align: center;
        background-size: 100% 100%;
      }

      .selectAll {
        vertical-align: middle;
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
</style>